<template>
  <div class="bigscreen">
    <img class="img left" src="@/assets/screendeck/header-left.png" alt="" />
    <img class="img right" src="@/assets/screendeck/header-right.png" alt="" />
    <header>
      <h1 class="title" />
      <TimeShow :refresh="currentTime" />
    </header>

    <aside class="left">
      <RealTime type="service" :code="areaCode" :counts="countData" :refresh="currentTime" />
      <InvokeStatus type="service" :code="areaCode" :counts="countData" :refresh="currentTime" />
      
    </aside>

    <main>
      <MapView :down="false" v-model="code" :time="time" :refresh="currentTime" :areas="areaList" />
      <ResourceMonitor :code="areaCode" :refresh="currentTime" />
    </main>

    <aside class="right">
      <RealTime type="event" :code="areaCode" :counts="countData" :refresh="currentTime" />
      <InvokeStatus type="event" :code="areaCode" :counts="countData" :refresh="currentTime" />
    </aside>
    <footer />
  </div>
</template>

<script>
import InvokeStatus from './components/InvokeStatus.vue'
import RealTime from './components/RealTime.vue'
import MapView from '../bigscreen/components/MapView'
import ResourceMonitor from './components/ResourceMonitor'
import TimeShow from './components/TimeShow.vue'
import { getArea } from "@/api/dict";
import { onBeforeUnmount, onMounted, ref, onBeforeMount, watch } from 'vue'
import { getStatisticsCount } from '@/api/statistics'
export default {
  name: 'Screenboard',
  components: {
    InvokeStatus,
    RealTime,
    TimeShow,
    MapView,
    ResourceMonitor,
  },
  setup(props) {
    const code =ref('330300')
    const areaCode = ref('')
    const time = ref({
      startDate: null,
      endDate: null,
    })

    const currentTime = ref(null)
    const refreshTimer = ref(null)
    // 获取区县列表
    const areaList = ref([])
    const getAreaList = async (para) => {
      const res = await getArea(para);
      areaList.value = res.data;
    };
    // count接口的数据
    const countData = ref({})
    const getCountData = async() => {
      const res = await getStatisticsCount({ areaCode: areaCode.value })
      if (res.status === 200) {
        countData.value = res.data
      }
    }
    // 因为后端说在选中温州市的时候，数据接口都用'''
    watch(() => code.value,(val)=> {
      areaCode.value = (val =='330300'?'':val)
      getCountData()
    })
    onBeforeMount(() => {
      clearInterval(refreshTimer.value)
      refreshTimer.value = null;
    })
    onMounted(() => {
      getAreaList()
      getCountData()
      currentTime.value = new Date().getTime()
      // refreshTimer.value = setInterval(() => {
      //   currentTime.value = new Date().getTime()
      // }, 60000)
    })
    onBeforeUnmount(() => {
      clearInterval(refreshTimer.value)
      refreshTimer.value = null;
    })
    return {
      code,
      areaCode,
      time,
      currentTime,
      areaList,
      countData
    }
  }
}
</script>

<style lang="scss" scoped>
.bigscreen {
  display: grid;
  width: 100%;
  height: 100%;
  grid-template-columns: 22vw 56vw 22vw;
  grid-template-rows: calc(100vw / 20) calc(100% - 5vw - 3.5vw ) 3.5vw;
  grid-template-areas: 'header header header'
    'left main right'
    'footer footer footer'
  ;
  grid-gap: 0 14px;
  background: rgba(0, 6, 22, 1);
  box-sizing: border-box;
  align-content: space-around;
  &>* {
    box-sizing: border-box;
  }

  background-image: url(@/assets/screendeck/background.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 77% auto;
  .title {
    width: calc(100% - 480px);
  }
  >.img {
    width: 224px;
    height: 307px;
    position: fixed;

    &.left {
      width: 245px;
      top: 0;
      left: 0;
    }

    &.right {
      top: 0;
      right: 0;
    }
  }

  &>footer {
    grid-area: footer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 36px;
    color: #fff;
    font-weight: 800;
    background-image: url(@/assets/screendeck/footer.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% auto;
  }

  &>header {
    grid-area: header;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 36px;
    color: #fff;
    font-weight: 800;
    background-image: url(@/assets/screenboard/header.png);
    background-repeat: no-repeat;
    background-size: 100% auto;
    z-index: 3;
  }

  &>aside {
    display: grid;
    grid-gap: 14px 14px;
    height: calc(100%);

    &.left {
      padding-left: 14px;
      grid-area: left;
      grid-template-columns: 100%;
      grid-template-rows: 50% 50%;
    }

    &.right {
      padding-right: 40px;
      grid-area: right;
      grid-template-columns: 100%;
      grid-template-rows: 50% 50%;
    }
  }

  &>main {
    grid-area: main;
    display: grid;
    grid-gap: 14px 14px;
    grid-template-columns: 100%;
    grid-template-rows: calc(58%) 42%;
  }

  ::-webkit-scrollbar {
    width: 4px;
    height: 8px;
    background-color: #000E32;
  }

  /*定义滑块颜色+圆角*/
  ::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background-color: rgba(255, 255, 255, 0.2);
  }

  /*定义滚动条轨道内阴影+圆角*/
  ::-webkit-scrollbar-track {
    border-radius: 10px;
    background-color: #000E32;
  }
}
:deep(.select-area) {
  top: 6vw;
}
</style>